
CSS align-content 属性

CSS 参考手册 CSS 参考手册
定义和用法

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
提示：使用 justify-content 属性对齐主轴上的各项（水平）。
注意：容器内必须有多行的项目，该属性才能渲染出效果。
默认值：	stretch
继承：	否
可动画化：	否。请参阅 可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignContent="center"
CSS 语法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
默认值

值	描述	测试
stretch	默认值。项目被拉伸以适应容器。	测试 »
center	项目位于容器的中心。	测试 »
flex-start	项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。	 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>

</body>
</html>


-------------------------------------------------------------------------------------------------------------------------------------


CSS align-items 属性

CSS 参考手册 CSS 参考手册
定义和用法

align-items：设置了flex容器的对齐方式。
提示：使用每个flex对象元素的 align-self 属性可重写 align-items 属性。
默认值：	stretch
继承：	否
可动画化：	否。请参阅 可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignItems="center"尝试一下

CSS 语法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
属性值

值	描述	测试
stretch	默认。 拉伸元件以适应容器。	测试 »
center	中心元素在容器内。	测试 »
flex-start	位置元素在容器的开头。	测试 »
flex-end	位置元素在容器的末端。	测试 »
baseline	位置元素在容器的基线。	测试 »
initial	设置为默认值。请参阅 initial。	测试 »
inherit	从其父元素继承此属性。请参阅 inherit。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#main div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>

------------------------------------------------------------------------------------------------------------

CSS align-self 属性
由 youj 创建，最后一次修改 2016-07-22
CSS align-self 属性

CSS 参考手册 CSS 参考手册

定义和用法

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。。
注意：align-self 属性可重写灵活容器的 align-items 属性。
默认值：	auto
继承：	否
可动画化：	否。请参阅 可动画化（animatable）。
版本：	CSS3
JavaScript 语法：	object.style.alignSelf="center"

CSS 语法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
参数

值	描述	测试
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。	测试 »
stretch	元素被拉伸以适应容器。	测试 »
center	元素位于容器的中心。	测试 »
flex-start	元素位于容器的开头。	测试 »
flex-end	元素位于容器的结尾。	测试 »
baseline	元素位于容器的基线上。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0+ */
    display: flex;
    align-items: flex-start;
}

#main div {
    -webkit-flex: 1; /* Safari 6.1+ */
    flex: 1;
}

#myBlueDiv {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

<p><b>注意:</b> align-self 属性重写了容器的 align-items 属性。</p>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>

--------------------------------------------------------------------------------------------------------------


CSS all 属性
由 youj 创建，最后一次修改 2016-08-04
CSS all 属性

实例

修改所有元素或其父元素的属性为初始值：
div {
    background-color: yellow;
    color: red;
    all: initial;
}

尝试一下 »
定义和使用

all 属性用于重置所有属性，除了 unicode-bidi 和 direction。
默认值:	none
继承:	无
动画:	no。 阅读 animatable
版本:	CSS3
JavaScript 语法:	object.style.all="initial"
浏览器支持

The numbers in the table specify the first browser version that fully supports the property.
表格中的数字表示支持该属性的浏览器最低版本号。
属性						
all	37.0	不支持	不支持	27.0	不支持	24.0
CSS 语法

all: initial|inherit|unset;
属性值

值	描述
initial	修改所有元素属性或父元素的值为其初始化值
inherit	修改所有元素属性或父元素的值为其父元素的值
unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style> 
html {
  font-size: small;
  color: blue;
}

#ex1 {
  background-color: yellow;
  color: red;
}

#ex2 {
  background-color: yellow;
  color: red;
  all: inherit;
}

#ex3 {
  background-color: yellow;
  color: red;
  all: initial;
}

#ex4 {
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>

<p>没有 all 属性:</p>
<div id="ex1">W3Cschool教程 -- 学的不仅是技术，更是梦想！！！</div>

<p>all: inherit:</p>
<div id="ex2">W3Cschool教程 -- 学的不仅是技术，更是梦想！！！</div>

<p>all: initial:</p>
<div id="ex3">W3Cschool教程 -- 学的不仅是技术，更是梦想！！！</div>

<p>all: unset:</p>
<div id="ex4">W3Cschool教程 -- 学的不仅是技术，更是梦想！！！</div>

<p><b>注意：</b> Internet Explorer 和 Safari 浏览器不支持 all 属性。</p>

</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------

CSS background-color 属性


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
body
{
	background-color:yellow;
}
h1
{
	background-color:#00ff00;
}
p
{
	background-color:rgb(255,0,255);
}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<p>这是一个段落。</p>
</body>

</html>

-----------------------------------------------------------------------------------------------------------------------------

CSS background-image 属性


实例
设置body元素的背景图像：
body
{
background-image:url('paper.gif');
background-color:#cccccc;
}
----------------------------------------------------------------------------------------------------------------------------------

CSS3 background-size 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
body
{
	background:url('/statics/images/course/img_flwr.gif');
	background-size:60px 60px;
	background-repeat:no-repeat;
	padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>

<p>原始图片: <img src="/statics/images/course/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>

</body>
</html>

----------------------------------------------------------------------------------------
CSS background-repeat 属性

repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
body
{
	background-image:url('/statics/images/course/paper.gif');
	background-repeat:repeat-x;
}
</style>
</head>

<body>
<p>repeat-y will repeat a background image only vertically.</p>
</body>
</html>


----------------------------------------------------------------------------
CSS background-position 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
body
{ 
	background-image:url('/statics/images/course/smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}
</style>
</head>

<body>
<p><b>注意:</b> 该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed".</p>
</body>
</html>

---------------------------------------------------------------------------------------------------------
CSS border-bottom 属性


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
p 
{
	border-style:solid;
	border-bottom:thick dotted #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
p 
{
	border-style:solid;
	border-bottom-color:#ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:2px solid;
padding:10px;
background:#ccc;
border-bottom-left-radius:2em;

}
</style>
</head>
<body>

<div>border-bottom-left-radius 属性允许您向左下角添加圆角边框。</div>

</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
p 
{
border-style:solid;
border-bottom-width:15px;
}
</style>
</head>
<body>

<p><b>注意:</b> "border-bottom-width" 属性单独使用无效. 要先使用 "border-style"属性设置borders .</p>

</body>
</html>


---------------------------------------------------------------------------------------------------------
CSS color 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

------------------------------------------------
CSS text-align 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>


-----------------------------------------------------------
CSS3 text-overflow 属性


值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
div.test
{
	white-space:nowrap; 
	width:12em; 
	overflow:hidden; 
	border:1px solid #000000;
}
</style>
</head>
<body>

<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 "text-overflow:ellipsis":</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定义字符串 "text-overflow: &gt;&gt;"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>


-------------------------------------------------------------
CSS white-space 属性

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
p
{
	white-space:nowrap;
}
</style>
</head>
<body>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

</body>
</html>

------------------------------------------------------------------

CSS3 word-break 属性

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。
------------------------------------------
CSS3 word-wrap 属性

normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。